<template>
  <div>
    <h1>当前求和为:{{ sum }}</h1>
    <h3>当前求和放大10倍为:{{ bigSum }}</h3>
    <h3>我在： {{ school }}，学习{{ subject }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1,
    };
  },
  components: {},
  // 计算属性
  computed: {
    // sum() {
    //   return this.$store.state.sum;
    // },
    // school() {
    //   return this.$store.state.school;
    // },
    // subject() {
    //   return this.$store.state.subject;
    // },
    // bigSum() {
    //   return this.$store.getters.bigSum;
    // },
    // 借助mapState生成计算属性，从state中读取数据。（对象写法）
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
    // 借助mapState生成计算属性，从state中读取数据。（数组写法）
    ...mapState(["sum", "school", "subject"]),
    // 借助mapGetters生成计算属性，从getters中读取数据。（对象写法）
    ...mapGetters({ bigSum: "bigSum" }),
    // 借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
    // ...mapGetters(["bigSum"]),
  },
  mounted() {},
  methods: {
    // increment() {
    //   this.$store.commit("JIA", this.n);
    // },
    // decrement() {
    //   this.$store.commit("JIAN", this.n);
    // },

    // 借助mapMutation生成对应的方法，方法会被调用去联系Mutations （对象的写法）
    ...mapMutations({increment: 'JIA',decrement: 'JIAN'}),

    // 借助mapMutation生成对应的方法，方法会被调用去联系Mutations,这里注意一下，数组里面的value就是方法，这个方法要声明在html的方法中，名字要修改 （数组的写法）
    // ...mapMutations(['JIA','JIAN']),

    // mapActions生成actions的对应方法，方法会去调用actions来响应组件的状态,在html中需要传入要加的数据 （对象的写法）
    ...mapActions({incrementOdd: "jiaOdd",incrementWait: "jiaWait"}),

    // mapActions生成actions的对应方法，方法会去调用actions来响应组件的状态,在html中需要传入要加的数据,这个方法要声明在html的方法中，名字要修改 （数组的写法）
    // ...mapActions(["jiaOdd","jiaWait"]),

    // incrementOdd() {
    //   this.$store.dispatch("jiaOdd", this.n);
    // },
    // incrementWait() {
    //   this.$store.dispatch("jiaWait", this.n);
    // },
  },
};
</script>

<style scoped>
button {
  margin-left: 10px;
}
</style>
